<template>
    <div class="content">
        <SearchTitle @searchClick="SearchTitleClick" />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <el-card>
                <div class="jsflexBox">
                    <div class="jsflexLabel">展会类型</div>
                    <div class="jsRightFlex">
                        <div :class="{ active: parameterData.type === item.value }" v-for="item in zhlxTypeData"
                            :key="item.id" @click="zhlxTasbsfun(item.value)">
                            {{ item.text }}
                        </div>
                    </div>
                </div>
                <div class="jsflexBox">
                    <div class="jsflexLabel">展会分类</div>
                    <div class="jsRightFlex">
                        <div :class="{ active: parameterData.type2 === item.value }" v-for="item in DWTypeGroupByData"
                            :key="item.id" @click="zhflTasbsfun(item.value)">
                            {{ item.text }}
                        </div>
                    </div>
                </div>
            </el-card>
            <div class="jrlistTotalBox">共搜索到 {{totalData}} 条结果</div>
            <div class="flexGap">
                <ExhibitionListCard class="listCardBox" v-for="(item, index) in lcExhibitionsInfosDWLoadData"
                    :key="index" :exhibition="item" />
            </div>
            <div class="fenyeBox">
                <el-pagination v-model:current-page="parameterData.pageNum" v-model:page-size="parameterData.pageSize"
                    :page-sizes="[100, 200, 300, 400]" background layout="prev, pager, next, jumper" :total="totalData"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import SearchTitle from '@/components/general/SearchTitle.vue';
import ExhibitionListCard from '@/components/general/ExhibitionListCard.vue';
import { DWTypeGroupBy } from '@/api/dictionary.js';
import { lcExhibitionsInfosDWLoad } from '@/api/api.js'
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
onMounted(() => {
    DWTypeGroupByfun()
    parameterData.value = { ...parameterData.value, ...route.query };
    lcExhibitionsInfosDWLoadfun()
})
// 展会类型
const zhlxTypeData = ref([
    {
        text: '全部',
        value: '',
    },
    {
        text: '推荐展会',
        value: '推荐展会',
    },
    {
        text: '最新展会',
        value: '最新展会',
    },
    {
        text: '全部展会',
        value: '全部展会',
    }
])
// 展会分类
const DWTypeGroupByData = ref([])
const DWTypeGroupByfun = async () => {
    const res = await DWTypeGroupBy();
    const data = Object.entries(res.result).map(([key, value]) => ({
        text: key,
        value: key,
    }));
    DWTypeGroupByData.value = [
        {
            text: '全部',
            value: '',
        },
        ...data
    ]
}
// 展会类别点击
const zhlxTasbsfun = (type) => {
    parameterData.value.type = type;
    lcExhibitionsInfosDWLoadfun()
}
// 展会分类点击
const zhflTasbsfun = (type) => {
    parameterData.value.type2 = type;
    lcExhibitionsInfosDWLoadfun()
}
// 展会列表
const parameterData = ref({
    pageNum: 1, // 页码
    pageSize: 10, // 每页条数
    type: '', // 展会分类
    type2: '', // 展会类型
})
// 展会列表接口
const lcExhibitionsInfosDWLoadData = ref([]) // 展会列表数据
const totalData = ref(0) // 展会列表总数
const lcExhibitionsInfosDWLoadfun = async () => {
    const res = await lcExhibitionsInfosDWLoad(parameterData.value);
    totalData.value = res.count
    lcExhibitionsInfosDWLoadData.value = res.result;
}
// 分页
const handleCurrentChange = (val) => {
    parameterData.value.pageNum = val;
    lcExhibitionsInfosDWLoadfun()
}
// 顶部搜索点击事件
const SearchTitleClick = (name) => {
    parameterData.value.name = name;
    parameterData.value.pageNum = 1;
    lcExhibitionsInfosDWLoadfun()
}
// 返回
const fanhuifun = () => {
    router.go(-1);
};
</script>
<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    // min-height: calc(100vh - 60px);
    min-height: 100vh;
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.jrlistTotalBox {
    font-size: 16px;
    color: #1F1F1F;
    margin: 30px 0;
}

.flexGap {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

    .listCardBox {
        width: calc(20% - 16px); // 5列布局（100% / 5 = 20%）
        flex-shrink: 0;
    }
}

.jsflexBox {
    display: flex;
    margin-bottom: 20px;

    .jsflexLabel {
        width: 8%;
        font-size: 14px;
        color: #000000;
    }

    .jsRightFlex {
        display: flex;
        gap: 15px;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        cursor: pointer;
    }
}
.fenyeBox {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #F1F1F1;
    padding-top: 20px;
}
.active {
    color: #2972FA;
    font-weight: bold;
}
</style>
